<template>
  <div style="margin-top: 10PX;">
    <Flex gap="small" wrap>
      <a-button type="primary" style="margin-left: 20px" @click="bpmnDetailShow"> <a-icon type="AndroidOutlined" />xml</a-button>
      <a-button type="primary" style="margin-left: 20px" @click="downloadSvg">SVG</a-button>
    </Flex>
  </div>
  <div class="containers" ref="content">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
  <Modal ref="bpmnDetailModal" :bpmnXML="bpmnXML"></Modal>
</template>


<script lang="ts">
import { useRoute } from 'vue-router'
import aIcon from '@/components/aicon/aicon.vue'
import { defineComponent, reactive, onBeforeMount,ref ,getCurrentInstance } from 'vue'
import BpmnModeler from 'bpmn-js/lib/Modeler' // 引入 bpmn-js
import Modal from './bpmnDetail.vue'
// camunda 官方侧边栏扩展
import { BpmnPropertiesPanelModule,BpmnPropertiesProviderModule,CamundaPlatformPropertiesProviderModule } from 'bpmn-js-properties-panel'

export default defineComponent({
  name: 'fl_designer',
  components: {
    Modal,
    aIcon
  },
  data () {
    return {
        bpmnXML:null,
        bpmnModeler: new BpmnModeler(),
        container: {},
        canvas: null,
        uploadBpmnFileList: [],
        scale: 1,      
    }
  }, 
  setup (props, context) {
    const datab = getCurrentInstance();
    const bpmnDetailModal = ref()


    async function bpmnDetailShow() {    
      const result = await datab.data.bpmnModeler.saveXML({ format: true });
      const { xml } = result;
      datab.data.bpmnXML=xml;
      bpmnDetailModal.value.open();
    }


    const route = useRoute();
    return { route,bpmnDetailModal,bpmnDetailShow }
  },

  methods: {
     /**
     * 初始化流程设计器对象
     * @returns {Promise<void>}
     */
    init() {       
      this.initBpmn()
    },
    downloadSvg(){
      
    },
    initBpmn() {
      // 获取到属性ref为“content”的dom节点
      const con:any=this.$refs.content;
      this.container = con;
      // 获取到属性ref为“canvas”的dom节点
      const canvas:any = this.$refs.canvas
      // 创建BpmnModeler
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        // 加入工具栏支持
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule,
          CamundaPlatformPropertiesProviderModule
        ]
        // moddleExtensions: {
        //   bpmn: bpmnModdleDescriptor,
        // },
      });

      // 创建新流程
      this.bpmnModeler.createDiagram();
      
  },
   
  },
  mounted () {
    this.init();  
  }
})
</script>
<style lang="scss">
  /*左边工具栏以及编辑节点的样式*/
    @import 'bpmn-js/dist/assets/diagram-js.css';
    @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
    @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
    @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
    @import '@bpmn-io/properties-panel/dist/assets/properties-panel.css';

    .containers{
      width: 100%;
      height: 100%;
      display: flex;  //新增，为了让右侧和左侧一起看到
      .canvas{
        width: 100%;
        height: 100%;
        
      }
      .bjs-powered-by {
        display: none;
      }
   
      height: calc(100vh - 160px);
      margin-top: 10px;
      display: flex;
      background: url("")
        repeat !important;
    
  }
  
</style>